<template>
  <div class="page-manager">
    <!-- <div class="left">
      <div class="ser">
        <a-input-search
          v-model:value="searchValue"
          placeholder="输入模块包"
          enter-button
          @search="onSearch"
        />
        <div class="tab">
          <p class="on">H5端</p>
          <p>PC端</p>
        </div>
      </div>
    </div> -->
    <!-- <div class="right">
      <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
    </div> -->
    <PageView :pageData="Page" @operateChange="operateChange"> </PageView>
  </div>
</template>
<script setup>
import {
  getPagesList,
  createPages,
  editPages,
  deletePages,
} from "@/api/designer/pages";

import { getProjectsAll } from "@/api/designer/projects";

const router = useRouter();

/**
 * 左侧搜索值绑定
 */
const searchValue = ref("");

/**
 * 左侧搜索函数
 */
const onSearch = () => {};

/**
 * 表格操作变化事件
 */
const operateChange = (obj, row) => {
  if (obj.key === "setup") {
    router.push({
      path: "/designer/page/setup",
      query: {
        id: row._id
      },
    });
  }
};

/**
 * 表格数据绑定
 */
const Page = markRaw({
  addBtn: {
    label: "添加",
    type: "primary",
    icon: "icon iconfont icon-add",
    method: createPages,
  },
  form: {
    data: [
      {
        type: "Input",
        field: "name",
        label: "页面名称",
        value: "",
        placeholder: "页面名称",
        allowClear: true,
      },
      {
        type: "Select",
        field: "project",
        label: "类型",
        value: null,
        placeholder: "类型",
        allowClear: true,
        optionsProps: {
          label: "name",
          value: "_id",
        },
        options: getProjectsAll,
      },
    ],
    btns: [
      {
        label: "查询",
        key: "search",
        icon: "icon iconfont icon-sousuo1",
        type: "primary",
      },
    ],
  },
  table: {
    columns: [
      {
        title: "页面名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "类型",
        dataIndex: "project",
        render: (row) => {
          return row.project.name;
        },
      },
      {
        title: "页面路径",
        dataIndex: "url",
        key: "url",
      },
      {
        title: "操作时间",
        dataIndex: "createAt",
        key: "createAt",
      },
      {
        title: "操作",
        width: 200,
        key: "operate",
        btns: [
          {
            label: "编辑",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "edit",
            argKey: "_id",
            method: editPages,
          },
          {
            label: "页面设计",
            class: "table_edit-btn",
            icon: "icon iconfont icon-bianji",
            key: "setup",
            argKey: "_id",
          },
          {
            label: "删除",
            class: "table_del-btn",
            icon: "icon iconfont icon-shanchu",
            key: "delete",
            content: "请确认是否删除？",
            argKey: "_id",
            method: deletePages,
          },
        ],
      },
    ],
    data: getPagesList,
  },
  modal: {
    title: "页面",
    width: 500,
    className: "spec-modal",
    data: [
      {
        type: "Input",
        field: "name",
        label: "页面名称：",
        value: "",
        labelWidth: "90px",
        placeholder: "页面名称",
        rules: [
          {
            required: true,
            message: "请输入页面名称",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Input",
        field: "url",
        label: "页面路由：",
        value: "",
        labelWidth: "90px",
        placeholder: "页面路由",
        rules: [
          {
            required: true,
            message: "请输入页面路由",
            trigger: "blur",
          },
        ],
      },
      {
        type: "Select",
        field: "project",
        label: "所属项目：",
        value: null,
        labelWidth: "90px",
        placeholder: "所属项目",
        rows: 10,
        options: getProjectsAll,
        optionsProps: {
          label: "name",
          value: "_id",
        },
        rules: [
          {
            required: true,
            message: "请输入所属项目",
            trigger: "blur",
          },
        ],
      }
    ],
  },
});
</script>
<style lang="scss" scoped>
.page-manager {
  height: 100%;
  width: 100%;
}
.right {
  flex: 1;
}
.left {
  width: 220px;
  margin-right: 20px;
  background-color: #fff;
  padding: 0 15px;
  .ser {
    margin-top: 15px;
  }
  .tab {
    margin-top: 20px;
    p {
      height: 36px;
      line-height: 36px;
      border-right: 3px solid #ffffff;
      margin: 0 -15px;
      padding: 0 15px;
      &.on {
        border-right: 3px solid #ac3ee8;
        background-color: #fdeded;
      }
    }
  }
}
</style>
